import React, { useEffect } from 'react';
import { Form, Select, Input, FormInstance } from 'antd';

type DataSource = {
    "parentId": string;
    "_id": string;
    "name": string;
    "__v": number;
};
type Props = {
    addCategorysRef: React.MutableRefObject<FormInstance | null>;
    parentId: string;
    categorys: DataSource[];
};

// 添加分类的form组件
const AddForm: React.FC<Props> = ({ addCategorysRef, parentId, categorys }) => {
    const [form] = Form.useForm();
    useEffect(() => {
        addCategorysRef.current = form;
    }, [addCategorysRef, form]);
    return (
        <Form form={form}>
            <h3>所属分类:</h3>
            <Form.Item name="parentId" initialValue={parentId}>
                <Select>
                    <Select.Option key="0" value="0">一级分类</Select.Option>
                    {
                        categorys.map(({ _id, name }: DataSource): React.ReactNode => (
                            <Select.Option key={_id} value={_id}>{name}</Select.Option>
                        ))
                    }
                </Select>
            </Form.Item>
            <h3>输入分类:</h3>
            <Form.Item name="parentName" rules={[
                { required: true, message: '分类名称必须输入.' }
            ]}>
                <Input type="text" placeholder="请输入分类名称" />
            </Form.Item>
        </Form>
    );
};

export default AddForm;